<!DOCTYPE html>
<html>
<head>
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body id="login-body">
    <div class="login-bg">
        <div id="login-form">
        <!-- autocomplete 设置表单内的输入框是否自动完成 -->
        <form method="post" autocomplete="off" action="/login">
            <img alt="头像" src="/static/img/default-avatar.jpg" class="avatar" title="头像">
            <!-- placeholder 设置说明文字 autocomplete 设置是否自动补全 -->
            <br><input type="text" name="username" placeholder="邮箱/用户名" autocomplete="off" title="请输入用户名">
            <br><input type="password" name="password" placeholder="密码" autocomplete="off" title="请输入密码">
            <br><input type="submit" class="submit" value="登录">
            <br><p class="adduser">没有账号？去<a href="/register">注册>></a></p>
        </form>
    </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    $(function(){

    /* 用户名框失去焦点事件，如果查有此用户，就更换头像*/
    $('#login-form form input[name=email]').blur(function(event){
        var email = $(this).val()
        if(email != null && email != ""){
            $.ajax({
                url: '/ajax',
                data: {op: 'change_avatar', email:email},
                type: 'POST',
                dataType: 'json',
                success: function(data){
                    console.log(data['avatar'])
                    // if(data['avatar'] != false){
                    //     $('img[class=avatar]').attr('src': data['avatar'])
                    // }
                },
                error: function(){
                    console.log('请求头像失败')
                }
            })
        }
    });
    // // 表单提交事件
    // $('form').submit(function(evnet){
    //     // 验证非空
    //     username = $('input[name=username]').val()
    //     password = $('input[name=password]').val()

    //     if(username == null || password == null || username == '' || password == '') {
    //         alert('输入内容不能为空');
    //         return false
    //     }
    //     // 验证用户名和密码

    // });

    // function aa(username, password){
    //     // ajax验证是否登录成功
    // };

    // });
</script>
</html>